<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-verify demo</title>
    <script src="vue.min.js"></script>
    <script src="../dist/vue-verify.js"></script>
</head>
<body>
<div id="app">
    <p>
        <input v-model="name">
        <template v-if="validator.name.$dirty">
            <span v-if="validator.name.required">name reqiured</span>
            <span v-if="validator.name.minLength">please enter no less than 3 characters</span>
            <span v-if="validator.name.maxLength">please enter no more than 10 characters</span>
        </template>
    </p>

    <p>
        <input v-model="age">
        <template v-if="validator.age.$dirty">
            <span v-if="validator.age.required">age reqiured</span>
            <span v-if="validator.age.min">age must greater than or equal to 5</span>
            <span v-if="validator.age.max">age must smaller than or equal to 50</span>
        </template>

    </p>

    <p>
        <button type="button" v-if="validator.$dirty&&validator.$valid">submit</button>
    </p>
    <hr>
    <p>vm.validator</p>
    <pre>{{validator|json}}</pre>
</div>
<script>
    Vue.config.debug = true
    Vue.use(vueVerify)
    window.vm = new Vue({
        el: "#app",
        data: {
            name: "",
            age: 0
        },
        created: function () {
            this.$verify({
                name: {
                    required: true,
                    minLength: 3,
                    maxLength: 10
                },
                age: {
                    required: true,
                    min: 5,
                    max: 50
                }
            })
        },
        verifier: {
            namespace: "validator"//default verify
        }
    })
</script>
</body>
</html>